<template>
  <div class="footer">
    <div class="footer1" v-for="it in data" :key="it.id">
      <router-link :to="it.href" v-if="it.className === ''">
        <img :src="it.img" />
        <span>{{ it.title }}</span>
      </router-link>
      <a :href="it.href" v-else :class="it.className" :key="it.id">
        <img :src="it.img" />
    </a>
    </div>
  </div>
</template>
<script setup>
const data = [
  {
    title: "招生简章",
    id: 0,
    img: "/img/下载 (4).png",
    href: "/zhaosheng",
    className: "",
  },
  {
    title: "推荐院校",
    id: 1,
    img: "/img/下载 (5).png",
    href: "/tuijian",
    className: "",
  },
  {
    id: 2,
    img: "/img/立即咨询.faebc0eb.png",
    href: "https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb",
    className: "a-a",
  },
  {
    title: "专业介绍",
    id: 3,
    img: "/img/下载 (6).png",
    href: "/introduce",
    className: "",
  },
  {
    title: "回到首页",
    id: 4,
    img: "/img/下载 (7).png",
    href: "/HomeOne",
    className: "",
  },
];
</script>
<style scoped>
.footer {
  width: 100%;
  height: 3rem;
  background-image: linear-gradient(#148dfe, #7d48f8);
  z-index: 99;
  display: block;
  border-top: 0.02rem solid #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer1 {
  width: 20%;
  height: 100%;
}
.footer1 a {
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0.6rem;
}
.footer1 img {
  width: 1rem;
  height: 1rem;
}
.footer1 span {
  width: 100%;
  text-align: center;
  line-height: 1rem;
  font-size: 0.4rem;
  color: #fff;
}
.a-a img {
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
}
</style>